<script setup lang="ts">
import {ref} from "vue"

/* defines */
const dataPageEmit = defineEmits(['addOne', 'addTen']);
const counter = ref(0);

/*
  使用 Typescript 的类型推断进行声明
  这里的 defineEmits 是一个函数 所以用()结尾
  里面的参数是类型签名
  就像typescript中的 ( a:number, b:number ) => string; 一样
  类型签名是指 用来描述一个函数的参数和返回值类型的声明
    只是说明函数的 "输入" 和 "输出" 是什么类型, 不包含具体实现
*/
// const dataEmitTypescipt = defineEmits<{
//   ( e: 'warning' ):void
//   (e: 'error', value: number):void
// }>();


/* functions */
function btnClickedCallback(identity: string, event: Event) {
  if ( identity === 'add1' )
  {
    counter.value += 1;
    dataPageEmit('addOne', counter.value);
  }
  else if ( identity === 'add10' )
  {
    counter.value += 10;
    dataPageEmit('addTen', counter.value);
  }
  else
  {
    console.error('Unknown identity:', identity);
  }

}

</script>

<template>
<div>
  <button @click="btnClickedCallback('add1', $event)">Click to add 1</button>
  <br>
  <button @click="btnClickedCallback('add10', $event)">Click to add 10</button>
</div>
</template>

<style>
</style>
